import 'package:flutter/material.dart';

class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context){

    // demo for router
//    return new MaterialApp(
//        title: 'Hello Flutter',
//        home: PageHome(),
//        routes: {
//          '/page_one': (BuildContext context) => PageOne(),
//          '/page_two': (BuildContext context) => PageTwo()
//        },
//        initialRoute: '/page_one'
//    );
    return new MaterialApp(
        title: 'Hello  Material App',
//        home: HomePage2()
        home: HomePage()
    );
  }
}

/** ----------------- demo for MaterialApp and routes  --------------- */
class PageHome extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
        appBar:AppBar(title:Text('Page Home')),
        body:Center(child:Text("Page Home"))
    );
  }
}

class PageOne extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
        appBar:AppBar(title:Text('Page One')),
        body:Center(
            child: RaisedButton(
              child: Text('to Page Two'),
              onPressed: (){
                Navigator.pushNamed(context, '/page_two');
              },
            )
        )
    );
  }
}
class PageTwo extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
        appBar:AppBar(title:Text('Page Two')),
        body:Center(
            child: RaisedButton(
              child: Text('to Page One'),
              onPressed: (){
                Navigator.pushNamed(context, '/page_two');
              },
            )
        )
    );
  }
}


/// ----------------- demo for Material AppBar BottomNavigationBar  Drawer ---------------

class HomePage extends StatefulWidget {
  @override
  _HomeState createState() => new _HomeState();
}

enum MenuItem { MenuItemOne, MenuItemTwo, MenuItemThree }

class _HomeState extends State<HomePage> {

  int _selectedIndex = 1;
  final bottomTabs = ['Index0:Home','Index1:Message','Index2:Account',];

  var card = new SizedBox(
    child: new Card(
      child: new Column(
        children: <Widget>[
          new ListTile(
            title: new Text('*******1', style : new TextStyle(fontWeight: FontWeight.w300)),
            subtitle: new Text ('***********'),
            leading: new Icon(Icons.build, color: Colors.lightGreen),
          ),
          new Divider(),
          new ListTile(
            title: new Text('*******2', style : new TextStyle(fontWeight: FontWeight.w300)),
            subtitle: new Text ('***********'),
            leading: new Icon(Icons.build, color: Colors.lightGreen),
          ),
        ]
      )
    )
  );

  var sRadio = 'a';
  var sCheck = true;
  var sCheck2 = false;
  updateGroupValue (String value) {
    setState(() {
      this.sRadio = value;
      print ('updateGroupValue :${value}');
    });
  }

  updateCheckValue (bool value) {
    setState(() {
      this.sCheck = value;
      print ('updateCheckValue :${sCheck ? 'true':'false'}');
    });
  }
  var sliderValue = 30.0;
  var slideRangeValues = RangeValues(5, 20);

  @override
  Widget build(BuildContext context) {
    var cardRadio =  new Card(
      child: new Row(
        children: <Widget>[
          Radio(
            groupValue: sRadio,
            activeColor: Colors.blue,
            value: 'Radio One',
            onChanged: updateGroupValue,
          ),
          Radio(
            groupValue: sRadio,
            activeColor: Colors.blue,
            value: 'Radio Two',
            onChanged: updateGroupValue,
          ),
        ]
      )
    );

    var cardRadioTile =  new Card(
        child: new Column(
            children: <Widget>[
              RadioListTile(
                secondary: const Icon(Icons.sentiment_dissatisfied),
                groupValue: this.sRadio,
                activeColor: Colors.blue,
                value: 'Radio Two',
                title: const Text('选项二'),
                controlAffinity: ListTileControlAffinity.trailing,
                onChanged: updateGroupValue,
              ),
              RadioListTile(
                secondary: const Icon(Icons.sentiment_dissatisfied),
                controlAffinity: ListTileControlAffinity.trailing,
                groupValue: this.sRadio,
                activeColor: Colors.blue,
                value: 'Radio One',
                title: const Text('选项一'),
                onChanged: updateGroupValue,
              ),
            ]
        )
    );

    var cardCheckTile = new SizedBox(
      child: new Card(
        child: new Column(
          children: <Widget> [
            new CheckboxListTile(
              secondary: const Icon(Icons.sentiment_dissatisfied),
              title: const Text('复选框1'),
              value: this.sCheck,
              onChanged: updateCheckValue,
            ),
            new CheckboxListTile(
              secondary: const Icon(Icons.sentiment_neutral),
              title: const Text('复选框2'),
              value: this.sCheck2,
            ),
          ]
        )
      )
    );
    var cardCheck = new SizedBox(
        child: new Card(
            child: new Column(
                children: <Widget> [
                  new Checkbox(
                    value: this.sCheck,
                    onChanged: updateCheckValue,
                  ),
                  new Checkbox(
                    value: this.sCheck2,
                  ),
                ]
            )
        )
    );

    // 进度条
    var progressIndicator = new SizedBox(
        child: new Card(
            child: new Column(
                children: <Widget> [
                  new LinearProgressIndicator(
                    backgroundColor: Colors.blue,
//                    value: 0.5,
                    valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
                  ),
                  Divider(),
                  new CircularProgressIndicator(
                    strokeWidth: 4.0,
                    backgroundColor: Colors.blue,
                    value: 0.8,
                    valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
                  ),
                ]
            )
        )
    );


    var slider = new SizedBox(
        child: new Card(
            child: new Column(
                children: <Widget> [
                  new Slider(
                    value: this.sliderValue,
                    max: 100.0,
                    min: 0.0,
                    activeColor: Colors.lightGreen,
                    inactiveColor: Colors.blueGrey,
                    label: 'label',
                    onChanged: (double val) {
                      this.setState(() {
                        this.sliderValue = val;
                        print ('update Slider Value :${val}');
                      });
                    },
                  ),
                  RangeSlider(
                    values: slideRangeValues,
                    divisions: 10,
                    max: 100.0,
                    min: 0.0,
                    onChanged: (RangeValues value) {
                      this.setState(() {
                        this.slideRangeValues = value;
                        print ('update Slider Value :${value.start} - ${value.end}');
                      });
                    },
                  ),
                  new Switch(
                    value: this.sCheck,
                    onChanged: updateCheckValue,
                  ),
                  new SwitchListTile(
                    secondary: const Icon(Icons.sentiment_neutral),
                    title: const Text('开关'),
                    value: this.sCheck2,
                  ),

                ]
            )
        )
    );




    final TextEditingController controller= TextEditingController(); // 添加文本编辑控制器监听文本输入内容变化
    controller.addListener(() {
      print ('input :${ controller.text }');
    });
    var textFiled = TextField(
        controller: controller, // 绑定 controller
        maxLength: 30, // 最大长度 右下角有一个输入数量的统计字符串
        maxLines: 1, // 最大行数
        autocorrect: true, // 是否自动更正
        autofocus: true,// 是否自动对焦
        obscureText: false,// 是否是密码
        textAlign: TextAlign.center, // 文本对齐方式
        style: TextStyle(fontSize: 26.0, color: Colors.green), // 输入文本的样式
        onChanged: (text) { print ( '文本内容改变时回调 $text '); }, // 文本内容改变时回调
        onSubmitted: (text) { print ( '文本提交改变时回调 $text '); },  // 内容提交时回调
        enabled: true ,// 是否禁用
        decoration: InputDecoration (// 添加装饰效果
          fillColor: Colors.grey.shade200 , // 添加灰色填充色
          filled: true,
          helperText: '请输入用户名',
          prefixIcon: Icon(Icons.person), // 左侧图标
          suffixText: '用户名' , // 右侧提示
        )
    );

    return new MaterialApp(
        title: 'Hello Flutter',
        home: new Scaffold(
          appBar: AppBar(
            centerTitle: true, //标题居中显示
            leading: Container(),//返回按钮占位
            actions: <Widget>[
              IconButton(icon: Icon(Icons.search),tooltip:'Search',onPressed:(){}),
              IconButton(icon: Icon(Icons.add), tooltip:'Add',onPressed:(){}),
            ],
            title: Text('主页'),
              toolbarOpacity: 0.5
          ),
          body: Column(children: <Widget>[
//            textFiled,
//            cardRadio,
//            cardRadioTile,
//            cardCheck,
//            cardCheckTile,
//            progressIndicator,
            slider,
            Text(bottomTabs[_selectedIndex]),
            FlatButton(
              onPressed: (){},
                textColor: Colors.teal,
              child: Text('文字按钮')
            ),
//            card,
//            PopupMenuButton<MenuItem>(
//              onSelected: (MenuItem result) {},
//              itemBuilder: (BuildContext context) => <PopupMenuEntry<MenuItem>>[
//                const PopupMenuItem<MenuItem>( value: MenuItem.MenuItemOne, child: Text('MenuItemOne')),
//                const PopupMenuItem<MenuItem>( value: MenuItem.MenuItemTwo, child: Text('MenuItemTwo')),
//                const PopupMenuItem<MenuItem>( value: MenuItem.MenuItemThree, child: Text('MenuItemThree')),
//              ],
//            ),
//            SimpleDialog(
//              title: Text('SimpleDilogTitle'),
//              children: <Widget > [
//                SimpleDialogOption( onPressed: () {} , child: Text('SimpleDilogOption 1')),
//                SimpleDialogOption( onPressed: () {} , child: Text('SimpleDilogOption 1')),
//              ],
//              contentPadding: EdgeInsets.all(5),
//              titlePadding: EdgeInsets.all(5),
//            ),
//            AlertDialog(
//              title: Text ( 'AlertDialogTitle'), // 对话框标题
////                contentPadding: EdgeInsets.all(0),
//              content: SingleChildScrollView(
//                child: ListBody(
//                  children: <Widget>[ Text ('内容1'), Text ('内容.....2')],
//                ),
//              ),
//              actions: <Widget> [
//                FlatButton( child: Text ('yes'),),
//                FlatButton( child: Text ('no'),)
//              ]
//            ),
          ],
          ),
          bottomNavigationBar: new BottomNavigationBar(
            //底部导航栏
            onTap: _onItemTapped,
            currentIndex: _selectedIndex, //默认选中的位置
            iconSize: 1,
            fixedColor: Colors.green, //选中的颜色
            items: <BottomNavigationBarItem>[
              new BottomNavigationBarItem(
                icon: new Icon(Icons.home,),
                title: new Text('Home',),
              ),
              new BottomNavigationBarItem(
                icon: new Icon( Icons.contacts,),
                title: new Text(
                  'Message',
                ),
              ),
              new BottomNavigationBarItem(
                icon: new Icon(
                  Icons.account_box,
                ),
                title: new Text(
                  'Account',
                ),
              ),
            ],
          ),
          //侧边栏 左滑可以拉出来
          drawer: Drawer(
            child: ListView (
              children: <Widget > [
                UserAccountsDrawerHeader(
                    accountName: new Text('Account Name'),
                    accountEmail: new Text('******@qq.com'),
                    currentAccountPicture: CircleAvatar(backgroundImage: NetworkImage("https://edgardeng.github.io/resource/image/favicon.jpg"),),
//                    currentAccountPicture: new CircleAvatar(backgroundImage: new NetworkImage('https://edgardeng.github.io/resource/image/favicon.jpg')),
                    onDetailsPressed: () {},
//                    otherAccountsPictures: <Widget>[],
//                    ListTile( leading: new CircleAvatar(child: Icon (Icons.map ))), // 导航栏菜单
                ),
                ListTile(title: Text('Photo'), leading: new CircleAvatar(child: Icon (Icons.album ),)),
                ListTile(title: Text('Setting'), leading: new CircleAvatar(child: Icon (Icons.settings ),)),
              ],
            )
          ),
          //悬浮按钮
          floatingActionButton: new Builder(builder: (BuildContext context) {
            return new FloatingActionButton(
                tooltip: '这里是长按提示的文字',
                backgroundColor: Colors.red,
                foregroundColor: Colors.white,
                elevation: 10.0, //阴影大小
                highlightElevation: 20.0, //设置高亮的阴影
                mini: true, //设置是否为小图标
                child: new Icon(Icons.add),
                shape: new CircleBorder(),
                isExtended: true,
                onPressed: () {
                  Scaffold.of(context).showSnackBar(new SnackBar(
                    content: new Text(" FloatingActionButton Clicked"),
                    backgroundColor: Colors.lightGreen,
                    duration: Duration( seconds: 3),
                    action: new SnackBarAction(
                      label: '撤消',
                      onPressed: () {
                        // do something to undo
                      },)
                    )
                  );
                }
            );
          }),
          floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        )
    );
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

}

/// ----------------- demo for Material  TabBar   ---------------

class TabItemView {
  final String title; // 标题
  final IconData icon; // 图
  const TabItemView({this.title, this.icon});
}
class SelectedView extends StatelessWidget {
  const SelectedView({ Key key, this.item}) : super(key: key);
  final TabItemView item;

  @override
  Widget build(BuildContext cantext) {
    final TextStyle textStyle = Theme
        .of(cantext)
        .textTheme
        .display1;
    return new Card(
        color: Colors.white,
        child: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min, // 垂直方向最小化处理
              crossAxisAlignment: CrossAxisAlignment.center, // 水平方向居中对齐
              children: <Widget>[
                new Icon(item.icon, size: 128, color: textStyle.color),
                new Text(item.title, style: textStyle),
              ],
            )
        )
    );
  }
}

class HomePage2 extends StatelessWidget{
  final List<TabItemView> items = <TabItemView>[
    TabItemView(title: 'Bike', icon: Icons.directions_bike),
    TabItemView(title: 'Car', icon: Icons.directions_car),
    TabItemView(title: 'Bus', icon: Icons.directions_bus),
  ];

  @override
  Widget build(BuildContext context){
    return new MaterialApp(
        home: DefaultTabController(
          length: items.length,
          child: new Scaffold(
            appBar: AppBar(
                centerTitle: true, //标题居中显示
                title: Text('主页'),
                bottom: TabBar(tabs: items.map((TabItemView item) {return Tab(text:item.title,icon:Icon(item.icon));}).toList(),)
            ),
            body: TabBarView(
              children: items.map((TabItemView item) {return SelectedView(item:item);}).toList()
            ) ,
          ),
        )
    );
  }
}

/// ----------------- demo for Material  Drawer   ---------------